<!--车辆年检管理页-->
<template>
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">车辆年检</span>
    <el-button @click="dialogVisible=true" type="primary" style="float:right;margin-top:13px;">录入年检车辆</el-button>
  </div>
  <!-- 录入年检车辆弹窗 -->
  <el-dialog :title="dialogTitle" v-model="dialogVisible" style="width:1000px;padding:40px;" :before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="送检人">
            <el-input disabled :value="user.username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="检查车辆">
            <el-select placeholder="请选择车牌号"  v-model="saveInspectionForm.vehicleLicense" :disabled="saveInspectionForm.id!=null">
              <el-option v-for="item in vehicleList"  :label="item.license" :value="item.id"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="年检项目">
            <el-select placeholder="请选择"  v-model="saveInspectionForm.item">
              <el-option v-for="item in itemOptions" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年检地点" >
            <el-select placeholder="请选择" v-model="saveInspectionForm.addr">
              <el-option v-for="item in addrOptions" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="年检费用">
            <el-input placeholder="请输入" v-model="saveInspectionForm.fee"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="年检证书">
            <el-input placeholder="请输入"  v-model="saveInspectionForm.code"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="送检时间">
            <el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-model="saveInspectionForm.inspectionTime"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="有效期">
            <el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"  v-model="saveInspectionForm.expireDate"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="年检状态">
            <el-radio-group  v-model="saveInspectionForm.status">
              <el-radio value="1" border style="margin-right:0;">送检中</el-radio>
              <el-radio value="0" border>已完成</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveInspection">录入</el-button>
    </template>
  </el-dialog>
  <!-- 车辆搜索卡片 -->
  <el-card style="margin:20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="车牌号" style="width:290px;" >
        <el-input placeholder="请输入车牌号" style="width:220px;" v-model="searchInspectionForm.vehicleLicense"></el-input>
      </el-form-item>
      <el-form-item label="送检人员">
        <el-input placeholder="请输入送检人姓名" style="width:220px;" v-model="searchInspectionForm.username"></el-input>
      </el-form-item>
      <el-form-item label="年检状态" style="width: 290px;">
        <el-select placeholder="请选择年检状态" v-model="searchInspectionForm.status">
          <el-option label="送检中" value="1"></el-option>
          <el-option label="已完成" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadInspection">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 车辆列表 -->
  <el-card style="margin:20px;">
    <el-table :data="inspectionArr">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="vehicleLicense" label="年检车辆" align="center"/>
      <el-table-column prop="item" label="年检项目" align="center" :formatter="itemFormatter"/>
      <el-table-column prop="username" label="送检人员" align="center"/>
      <el-table-column prop="addr" label="年检地点" align="center" :formatter="addrFormatter"/>
      <el-table-column prop="inspectionTime" label="年检时间" align="center"/>
      <el-table-column prop="expireDate" label="年检时间" align="center"/>
      <el-table-column prop="fee" label="年检费用" align="center"/>
      <el-table-column prop="status" label="年检状态" align="center" :formatter="statusFormatter"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="editInspection(scope.row.id)">编辑</el-button>
          <el-button link type="primary" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script setup>
import {onMounted, ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";

const user=ref(getUser());
//控制录入年检车辆弹窗是否显示
const dialogVisible = ref(false);
//定义变量控制dialog的标题
const dialogTitle = ref('录入年检车辆');

const inspectionArr = ref([
  {
    id: 1,
    code: '123456',
    expireDate: '2022-01-01',
    inspectionTime: '2022-01-01',
    item: '违章检查',
    fee: '100',
    addr: '北京顺义机动车检测中心',
    vehicleId: '1',
    vehicleLicense: '京B28323',
    userId: '1',
    username: '张三',
    status: '送检中'
  }

]);

const saveInspectionForm=ref({
  code: '',
  expireDate: '',
  inspectionTime: '',
  item: '',
  fee: '',
  addr: '',
  vehicleId: '',
  vehicleLicense: '',
  userId: '',
  username: '',
  status: ''

})
const vehicleList=ref([]);
const loadVehicle = ()=>{
  axios.get(BASE_URL+'/v1/vehicle/select?status=1').then((response)=>{
    if (response.data.code==2000){
      vehicleList.value = response.data.data;
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
const itemOptions=ref([]);
const addrOptions=ref([]);
const itemFormatter = (row,column,cellValue,index)=>{
  if(!itemOptions.value){
    return cellValue;
  }
  for(let item of itemOptions.value){
    if(item.value==cellValue){
      cellValue = item.label;
    }
  }
  return cellValue;
}
const addrFormatter = (row,column,cellValue,index)=>{
  if(!addrOptions.value){
    return cellValue;
  }
  for(let item of addrOptions.value){
    if(item.value==cellValue){
      cellValue = item.label;
    }
  }
  return cellValue;
}
const statusFormatter=(row,column,cellValue,index)=>{
  if(cellValue==1){
    cellValue='送检中';
  }else{
    cellValue='已完成';
  }
  return cellValue;
}
const saveInspection = () => {
  saveInspectionForm.value.userId=user.value.id;
  saveInspectionForm.value.username=user.value.username;
  let data=qs.stringify(saveInspectionForm.value)
  axios.post(BASE_URL+'/v1/inspection/save',data).then(res=>{
    if(res.data.code==2000){
      dialogVisible.value=false;
      ElMessage.success('录入成功');
      saveInspectionForm.value={};
      loadInspection();
    }
  })
};

//实现关闭功能
const handleClose = ()=>{
  if (confirm('确认关闭本窗口?')){
    dialogVisible.value=false;
    saveInspectionForm.value={};
  }
}


const searchInspectionForm=ref({
  vehicleLicense: '',
  username: '',
  status: ''
})

const resetSearch = () => {
  searchInspectionForm.value={
    vehicleLicense: '',
    username: '',
    status: ''
  }
  loadInspection()
}

const loadInspection = () => {
  let data=qs.stringify(searchInspectionForm.value);
  axios.get(BASE_URL+'/v1/inspection/select?'+data).then(res=>{
    if(res.data.code==2000){
      inspectionArr.value=res.data.data;
    }
  });
  loadVehicle();
}


const editInspection = (id) => {
  dialogVisible.value=true;
  dialogTitle.value='编辑年检车辆';
  axios.get(BASE_URL+'/v1/inspection/select?id='+id).then(res=>{
    if(res.data.code==2000){
      saveInspectionForm.value=res.data.data[0];
    }
  })
}

const loadDictOptions = (object,dictCode)=>{
  //向后端发请求获取字典项
  axios.get(BASE_URL+'/v1/dictoption/select/'+dictCode).then((response)=>{
    if(response.data.code==2000){
      object.value = response.data.data;
    }else{
      ElMessage.error(response.data.msg);
    }
  });
}


onMounted(()=>{
  loadInspection();
  loadDictOptions(itemOptions,'inspection_item');
  loadDictOptions(addrOptions,'inspection_addr');
});

</script>